<template>
  <div class="mian">
    <div class="login_back">
      <div class="login_box">
        <div class="login_boxx">
          <!-- 左边图标 -->
          <div class="login_boxa">
            <div class="boxa">
              <img src="../assets/img/logo.png" class="boxa_img" />
            </div>
            <p>欢迎</p>
            <p>智学商城-后台管理系统</p>
          </div>
        </div>

        <!-- 右边登录 -->
        <div class="login_boxb">
          <div class="top">登录</div>

          <el-form ref="ruleFormRef" :model.trim="ruleForm" status-icon label-width="120px" class="demo-ruleForm">
            <!-- 账号 -->
            <el-form-item prop="username" class="tops">
              <el-input v-model.trim="ruleForm.username" type="username" autocomplete="off" placeholder="请输入账号">
                <template #prefix>
                  <el-icon :size="20">
                    <user />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>

            <!-- 密码 -->
            <el-form-item prop="password">
              <el-input v-model.trim="ruleForm.password" type="password" autocomplete="off" placeholder="请输入密码">
                <template #prefix>
                  <el-icon :size="20">
                    <lock />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>

            <el-button type="primary" @click="submitForm(ruleFormRef)" class="dapp">登录</el-button>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Lock, User } from '@element-plus/icons-vue'
import { post } from '@/utils/http.js' // 引入封装工具
import Cookies from 'js-cookie' // 引入cookie
import { mapActions } from "vuex"

export default {
  // 注册组件
  components: { Lock, User },

  data() {
    return {
      ruleForm: {
        _gp: 'admin',
        _mt: 'login',
        username: 'admin',
        password: '1234567'
      }
    }
  },

  methods: {

    ...mapActions(["adds"]),
    submitForm(formName) {
      if (this.ruleForm.username.length == 0) {
        ElMessage.warning('请输入账号')
      } else if (this.ruleForm.password.length == 0) {
        ElMessage.warning('请输入密码')
      } else {
        // Qs转换数据类型
        const data = this.ruleForm
        // 设置token自动删除时间
        const datas = new Date().getTime()
        const tiem = new Date(datas + 60 * 1000 * 240) // 四个小时

        post(data).then((res) => {
          if (res.data.errno == 200) {
            // 判断data里的值是否返回正确
            ElMessage.success('登录成功！')
            Cookies.set('token', res.data.data, {
              expires: tiem
            })
            this.adds({ username: this.ruleForm.username, password: this.ruleForm.password })
            sessionStorage.setItem('token', res.data.data) // 设置临时储存token
            if (this.$route.query.namea) {
              this.$router.push(this.$route.query.namea) // 返回原来的页面
            } else {
              this.$router.push('/Index') // push直接从登录页面进入时可以后退
            }
          } else {
            ElMessage.error(res.data.errmsg)
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.mian {
  .login_back {
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../assets/img/login-back.png) no-repeat;
    width: 100%;
    height: calc(100vh);
    background-size: 100% 100%;
  }

  .login_box {
    margin: auto;
    vertical-align: middle;
    display: relative;
    width: 850px;
    height: 450px;
    z-index: 2;
    background-color: white;
    .login_boxx {
      width: 40%;
      height: 100%;
      float: left;
      text-align: center;
      background-color: #005de9;

      // 图标
      .login_boxa {
        width: 100%;
        margin-top: 90px;
        color: white;
        background-color: #005de9;
        .boxa {
          width: 130px;
          margin: auto;
          border-radius: 50%;
          background-color: #0369e9;
          border: #000 solid 1px;
          box-shadow: 10px -5px 20px 5px white;
          .boxa_img {
            width: 120px;
          }
        }
      }
    }

    // 登录
    .login_boxb {
      width: 60%;
      float: left;
      text-align: center;
      line-height: 50px;
      padding-top: 80px;

      /* 输入框 */
      .el-input {
        height: 60px;
        line-height: 60px;
      }
      .el-input /deep/ .el-input__inner {
        background-color: #e9effd;
        width: 70%;
        height: 45px;
        line-height: 45px;
      }
      .el-icon svg {
        padding-top: 20px;
        padding-right: 3px;
      }
    }
  }
}
</style>
